<template>
  <div v-loading="loading">
    <!-- 各资源使用情况   -->
    <resource-info :resource="resourceInfo" />
    <div class="data-details">
      <!-- 租户用户数量及锁定情况 -->
      <open-situation :situation="resourceInfo" />
      <!-- yarn队列 -->
      <yarn-list :yarnInfo="resourceInfo" />
    </div>
  </div>
</template>

<script>
import ResourceInfo from "../components/managerIndex/resourceInfo";
import OpenSituation from "../components/managerIndex/openSituation";
import YarnList from "../components/managerIndex/yarnList";
import { globalApi } from "@/request";
import roleMixin from "@/mixins/role";
import { mapGetters } from 'vuex'

export default {
  name: "home",
  components: {
    ResourceInfo,
    OpenSituation,
    YarnList
  },
  data() {
    return {
      loading: false,
      resourceInfo: {} //资源情况
    };
  },
  mixins: [ roleMixin ],
  computed: {
    ...mapGetters([ 'isUser' ])
  },
  methods: {
    getHomeInfo() {
      if (this.isUser) {
        return
      }
      globalApi.homeInfo().then(res => {
        this.resourceInfo = res.data;
        console.log(this.resourceInfo)
      });
    }
  },
  mounted() {
    this.getHomeInfo();
  }
};
</script>

<style scoped lang="scss">
.data-details {
  width: 100%;
  height: auto;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
}
</style>
